<script lang="ts">
import { Component, Vue, Prop,Watch } from 'vue-property-decorator';
import Heatmap from 'ol/layer/Heatmap';
import VectorSource from 'ol/source/Vector';
import { Feature } from 'ol';
import { Point } from 'ol/geom';

@Component
export default class HeatmapLayer extends Vue {
  @Prop() map;
  @Prop() heatPoints!: Array<{ coord: [number, number], intensity: number }>;

  private heatSource = new VectorSource();
  private heatLayer = new Heatmap({
    // source?: this.heatSource,
    blur: 25,
    radius: 20,
    weight: (feature) => feature.get('weight')
  });

  mounted() {
    this.heatLayer.setZIndex(1);
    this.map.addLayer(this.heatLayer);
    this.updateHeatmap();
  }

  beforeDestroy() {
    this.map.removeLayer(this.heatLayer);
  }

  @Watch('heatPoints')
  updateHeatmap() {
    this.heatSource.clear();
    this.heatPoints.forEach(point => {
      const feature = new Feature({
        geometry: new Point(point.coord),
        weight: point.intensity
      });
      this.heatSource.addFeature(feature);
    });
  }
}
</script>